<template>
	<view class="u-skeleton">
		<u-swiper
		class="u-skeleton-fillet"
            :list="urls"
			:effect3d="true"
			height="650"
            bg-color="#fff"
			
			border-radius='20'
			effect3d-previous-margin='20'
			img-mode='aspectFill'
			@click="handlePreviewImage()"
    >
<!-- 		<view
            slot="indicator"
            class="indicator-num"
        >
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ goodData.urls.length }}</text>
        </view> -->
	</u-swiper>
	<!-- <view class="iconfont icon-shangyige" @click="back()"></view> -->
	<view :style="'height:' + navBarHeight + 'rpx'" class="top">
		<view class="nav-main">
			<!-- 胶囊区域 -->
			<view class="capsule-box"
				:style="'height:' + menuHeight + 'px; min-height:' + menuHeight + 'px; line-height:' + menuHeight + 'px; bottom:' + menuBotton + 'px;left:' + menuRight + 'px;'">
				<!-- 导航内容区域 -->
				<view class="content">
					<view class="iconfont icon-shangyige" @click="back()"></view>
				</view>
			</view>
		</view>
	</view>
	<view class="goods_price ">
		<text class="u-skeleton-fillet">￥{{goodData.price}}</text>
	    
	</view>
	<view class="nameCss" >
		<view class="nameText u-skeleton-fillet">
			<text class="u-skeleton-rect">{{goodData.name}}</text>
		</view>
		<view class="iconChart u-skeleton-circle">
				  <qiun-data-charts
				    type="arcbar"
				    :chartData="{series:[{data:1,color:'#ffce44'}]}"
				    :loadingType="3"
				    background="none"
					:opts="{title:{name:exposure+'',color:'#fd7032',fontSize:10},subtitle:{name:'当前曝光量',color:'#413a3a',fontSize:5},extra:{arcbar:{type:'circle',width:2,backgroundColor:'#E9E9E9',startAngle:0.75,endAngle:0.75,radius:20,gap:2,centerX:0,centerY:0,linearType:'custom',customColor:['#fd7032']}}}"/>
					<!-- customColor是往哪个颜色渐变 -->
				
		</view>
	</view>
	<view class="goods_name_row u-skeleton-rect">
		<view class="icon1">
			<image src="http://1.14.247.152:9797/images/19120miaoshu.png" mode="widthFix"></image>
		</view>
		<text class="goodDetailText u-skeleton-rect">商品描述</text>
	    <view class="goods_name u-skeleton-fillet">{{goodData.detail}}</view>
	</view>
	<view class="areaCss comCss">
		<view class="icon1 icon2">
			<image src="http://1.14.247.152:9797/images/10752cheliangguanli.png" mode="widthFix"></image>
		</view>
		<text class="Title">校区</text>
		<text class="">{{location}}</text>
	</view>
	
	<view class="wxNumCss  comCss ">
		<view class="icon1 icon2">
			<image src="http://1.14.247.152:9797/images/15749lianxifangshi.png" mode="widthFix"></image>
		</view>
		<text class="Title u-skeleton-rect">联系方式</text>
		<view class="contact u-skeleton-fillet">
			<text class="u-skeleton-fillet">{{wxNumber}}</text>
		</view>
		 
	</view>
<!-- 	<view class="exposure  comCss">
		<text class="Title">当前曝光量</text>
		<view class="contact" style="color: #ffa500;">
			<text>{{exposure}}</text>
		</view>
		 
	</view> -->
	
	
	
	<view class="btm_tool u-skeleton-rect">
		
	   <!-- <view class="tool_item">
			<image src="http://1.14.247.152:9797/images/13226分享.png" mode="widthFix"></image>
	        <view style="font-weight: 600;font-size: 30rpx;">分享</view>
	        <button open-type="share">1</button>
	    </view>
		<view class="tool_item copyCss" @click="copyWxNum(wxNumber)">
			<image  class="fuzhiIcon" style="width: 40rpx;" src="http://1.14.247.152:9797/images/14205icon-.png" mode="widthFix" @click=""></image>
			<text>复制联系方式</text>
		</view> -->
		<text class="soldOut">已下架</text>
		
	  
	</view>
	<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodData: {},
				urls:[],
				currentNum:0,
				wxNumber:'',
				exposure:'',
				location:'',
				navBarHeight: 0,
				loading: true,
			};
		},
		onLoad(res){
			this.navBarHeight = getApp().globalData.navBarHeight,
			console.log('商品详情里面的onloadId',res.goodId)
			this.getGoodDetail(res.goodId)
		},
		methods:{
			back(){
				let pages = getCurrentPages(); //获取所有页面栈实例列表
			console.log('当前页面',pages);
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				uni.navigateBack({
					delta: 1
				})
			
			},
			swiperChange(e){
				console.log(e)
			},
			handlePreviewImage(e){
			    console.log('预览');
				console.log(e)
			    const urls = this.goodData.urls
			    const current = this.goodData.urls[e];
			    wx.previewImage({
			        current: current, // 当前显示图片的http链接
			        urls: urls// 需要预览的图片http链接列表
			      })
			},
			async getGoodDetail(goodId){
				uni.showLoading({
					title: '加载中'
				})
				let header = new Object
				header.Authority = getApp().globalData.header.Authority
				let res = await getApp().UniRequest("/twohandbook/goods/byId?id="+goodId,"GET","",header)
				console.log('获取商品详情信息',res)
				if(res.code==20000){
					// setTimeout(()=>{
					this.loading = false;
					// },1000)
					this.goodData=res.data.detail;
					if(res.data.detail.detail==''){
						this.goodData.detail='暂无'
					}
					let length = this.goodData.urls.length
					this.wxNumber = res.data.wxNumber
					this.exposure = this.goodData.exposure
					if(res.data.location==0){
						this.location = '海珠校区'
					}else if(this.goodData.location==0){
						this.location = '白云校区'
					}else{
						console.log('获取地址出错啦')
					}
					
					for(let i=0;i<length;i++){
						this.urls.push({image:this.goodData.urls[i],title:this.goodData.name})
					}
					uni.hideLoading()
					console.log('this.goodData',this.goodData)
				}
			},
			 copyWxNum(wxNum){
				 console.log('微信号',wxNum)
				console.log('复制按钮被点了！')
				wx.setClipboardData({
				      data:wxNum,
				      success:  (res)=> {
						  wx.showToast({
						    title: '复制成功',
						    icon: 'success',
						    duration: 1000
						  })
				        console.log("复制成功:", res)
						
				      },
				    })
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #edece8;
	}
	// .icon-shangyige{
	// 	font-size: 60rpx;
	// 	font-weight: 600;
	// }
	.icon1{
		width: 45rpx;
		margin-top: 11rpx;
		margin-right: 5rpx;
		image{
			width: 100%;
		}
	}
	.icon2{
		width: 45rpx;
		margin-top: 36rpx;
	}
	.top {
		width: 100%;
		position: absolute;
		z-index: 1000;
		top: 104rpx;
		left: 33rpx;
		.nav-main {
				width: 100%;
				height: 100%;
				position: relative;
			.capsule-box {
				position: absolute;
				box-sizing: border-box;
				width: 100%;
	
				.content {
					position: relative;
					display: flex;
					align-items: center;
					color: #939393;
	
					.icon-shangyige {
						font-size: 54rpx;
					    color: #fff;
					}
	
				}
			}
		}
	}
	.indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        // @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	.goods_price{
	    padding: 15rpx;
	    font-size: 50rpx;
	    font-weight: 600;
	    color: #eb4450;
	    margin-top: 10rpx;
	    margin-left: 9rpx;
	}
	.nameCss{
	    height: 141rpx;
	    width: 100%;
	    background-color: #ccc;
		display: flex;
		.nameText{
			flex: 3;
		    font-weight: 600;
		    line-height: 73px;
		    font-weight: 800;
		    height: 141rpx;
		    font-size: 38rpx;
		    width: 60rpx;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    padding-left: 39rpx;
		}
		.iconChart{
			height: 141rpx;
		    width: 80rpx;
		    flex: 1.8;
		    display: flex;
		    justify-content: left;
			/deep/.chartsview.data-v-fe947b98 {
				width: 60% !important;
}
		}
	}
	.goods_name_row{
	    border-top: 0.1px solid #dedede;
	    border-bottom: 0.1px solid #dedede;
	    padding: 24rpx 0 10rpx 30rpx;
	    display: flex;
	    align-items: center;
	    width: 100%;
	    margin: 0 auto;
	    min-height: 125rpx;
	    background-color: #fff;
		
		.goodDetailText{
			flex: 2;
		    font-size: 30rpx;
		    font-weight: 600;
		}
	    .goods_name{
	        flex: 6;
	        color: #000;
	        font-size: 28rpx;
	        padding: 0 10rpx;
	// 超过2行出现...
	        display: -webkit-box;
	        overflow: hidden;
	        -webkit-box-orient: vertical;
	        -webkit-line-clamp: 4;
	    }
	}
	.wxNumCss{
	    font-size: 30rpx;
	    border-bottom: 0.1rpx solid #dedede;
	    padding: 0rpx 0 10rpx 30rpx;
	    display: flex;
	    width: 90%;
	    margin: 0 auto;
		.Title{
			flex:2;
			font-weight: 600;
			display: flex;
			align-items: center;
		}
		.contact{
			flex:6;
			display: flex;
			align-items: center;
		}
	}
	.exposure{
		font-size: 30rpx;
		border-bottom: 0.1rpx solid #dedede;
		padding: 0rpx 0 10rpx 30rpx;
		display:flex;
		width: 90%;
		margin: 0 auto;
		.Title{
			flex:2;
			font-weight: 600;
			margin-left: -14rpx;
		}
		.contact{
			flex:6;
			margin-left: 16rpx;
		}
	}
	.comCss{
		background-color: #fff;
		height: 125rpx;
		width: 100%;
		// line-height: 100rpx;
	}
	.areaCss{
	    font-size: 30rpx;
	    border-bottom: 0.1rpx solid #dedede;
	    padding: 0rpx 0 10rpx 30rpx;
	    display: flex;
		.Title{
		    flex: 2.1;
		    font-weight: 600;
		    padding-left: 1rpx;
		    display: flex;
		    align-items: center;
		}
		text{
			flex:6; 
			display: flex;
			align-items: center;
		}
	}
	.btm_tool{
		border-top: 1px solid #ccc; 
	    position: fixed;
	    /* left: 0; */
	    bottom: 0;
	    width: 100%;
	    height: 90rpx;
	    background-color: #fdf8f8;
	    /* display: flex; */
	    text-align: center;
		text{
			line-height: 90rpx;
			color: #868585;
			letter-spacing: 13rpx;
			font-size: 34rpx;
		}
	    .tool_item{
	        flex: 1;
	        display: flex;
	        // flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        position: relative;
			background-color: #ffa500;
			color: #fff;
			image{
			    width: 40rpx;
			    margin-right: 10rpx;
			}
	        button{
	            position: absolute;
	            top: 0;
	            left: 0;
	            width: 100%;
	            height: 100%;
	            opacity: 0;
	        }
	    }
	    .share{
	        flex: 1;
	        display: flex;
	        // flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        background-color: #ffa500;
	        color: #fff;
	        font-size: 30rpx;
	        font-weight: 600;
	    }
	    .copyCss{
	        flex: 3;
	        display: flex;
	        // flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        background-color: #eb4450;
	        color: #fff;
	        font-size: 30rpx;
	        font-weight: 600;
	    }
	}
</style>
